<template>
  <view class="bg-c6">
    <view class="balance">
      <text class="text1 c7">阿币余额：</text>
      <text class="text2 c7 fs24">1000.00</text>
    </view>
    <view class="us">
      <image src="../../../static/images/home/ab-icon.png"> </image>
      <text class="text">阿币</text>
      <input type="text" placeholder="请输入金额">
    </view>
    <view class="ab">
      <image src="../../../static/images/home/us-icon.png"> </image>
      <text class="text1">美元</text>
      <text class="text2 c7">0.00</text>
    </view>
    <view class="explain">由于汇率实时变动，交易金额请以支付时为准</view>
    <view class="btn">确认</view>
  </view>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
@import "../../../styles/global/index";
.balance {
  padding: 40upx 0 0 46upx;
}
.us {
  height: 82upx;
  background: #fff;
  margin-top: 6upx;
  display: flex;
  align-items: center;
  padding: 0 46upx;
  image {
    @include size(30upx, 30upx);
  }
  .text {
    padding-left: 30upx;
  }
  .text2 {
    padding-left: 80upx;
  }
  input {
    padding-left: 80upx;
  }
}
.ab {
  height: 82upx;
  margin-top: 6upx;
  display: flex;
  align-items: center;
  padding: 0 46upx;
  image {
    @include size(30upx, 30upx);
  }
  .text1 {
    padding-left: 30upx;
  }
  .text2 {
    padding-left: 80upx;
  }
  input {
    padding-left: 80upx;
  }
}
.explain{
    text-align: center;
    margin-top:60upx;
    font-size: 24upx;
}
.btn{
    width: 650upx;
    margin:10upx auto;
    background: #007BC3;
    height: 66upx;
    line-height: 66upx;
    color:#fff;
    text-align: center;
    border-radius: 4upx;
}
</style>